接續第１１篇的ＡＮＧＵＬＡＲ

第 12 屆 iThome 鐵人賽

DAY 17

Modern Web

把前後分離製作的網站組起來系列第 17 篇

12th鐵人賽

Tzu

2020-09-17 06:58:55

833 瀏覽

分享至

完成用https://getbootstrap.com/ 初始化之後準備開工~

開始建立很多個有.css+.html+.spec.ts+.ts的vomponents
建立的方法就是在cmd打上語法

要下新的指令前要先按ctrl+c然後選Y在cmd打上語法ng generate component components/product-list
新增出來5個檔

到資料夾src-app-app.component.html新增內文

cmd再按ng serve --open就

看到網頁http://localhost:4200/

要下新的指令前要先按ctrl+c然後選在cmd打上語法ng generate class common/product
新增出來2個檔

對應著在springboot的http://localhost:8080/api/products 跑出來的
變數的數據.來寫變數

`{
  "_embedded" : {
    "products" : [ {
      "sku" : "BOOK-TECH-1000",
      "name" : "JavaScript - The Fun Parts",
      "description" : "Learn JavaScript",
      "unitPrice" : 19.99,
      "imageUrl" : "assets/images/products/placeholder.png",
      "active" : true,
      "unitsInStock" : 100,
      "dateCreated" : "2020-09-14T19:17:46.000+0000",
      "lastUpdated" : null,

開始寫code

string對應敘述
number對應數字
boolean對應的變數賦true/false如果是以外的值，將會報錯
Date是日期時間

typeScript是很重視空格的
sku: string;在中間要空一格不然會報錯+前面要空格


   sku: string;
   name: string;
   description: string;
   unitPrice: number;
   imageUrl: string;
   active: boolean;
   unitsInStock: number;
   dateCreated: Date;
   lastUpdated: Date;


}

然後再新增要確認是有cd angular-ecommerce(進入angular-ecommerce這個檔)在cmd打上語法ng generate service services/product

然後到app.module.ts去新增code

,HttpClientModule 在前面的,很重要要記得加

不過比較麻煩的是要自己去手刻import

還有providers: [ProductService],

然後到product.service.ts(service code打錯前後端就連不起來了喔~)

import { HttpClient } from '@angular/common/http';
import { Product } from '../common/product';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private baseUrl = 'http://localhost:8080/api/products';

  constructor(private httpClient: HttpClient) { }

  getProductList(): Observable<Product[]> {
    return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
      map(response => response._embedded.products)
    );
  }
}

interface GetResponse {
  _embedded: {
    products: Product[];
 };
}


import { ProductService } from './product.service';

describe('ProductService', () => {
  beforeEach(() => TestBed.configureTestingModule({}));

  it('should be created', () => {
    // tslint:disable-next-line: deprecation
    const service: ProductService = TestBed.get(ProductService);
    expect(service).toBeTruthy();
  });
});

開始要把前後端接起來了喔~

應該可以好好地把坑補起來